<!-- 四季对比插件 -->
<template>
	<div class='seasons'>
		<div class="seasons_box" v-for="(item,index) of cake">
			<span class="top">
				<span class="one_seasons" :style="{'background-color':item.itemStyle.color}"></span>
				<span class="one_seasons_text">{{item.itemStyle.name}}</span>
			</span>
			<span class="bottom">
				{{item.value}}%
			</span>
		</div>
		<!-- echarts图标 -->
		<div id="quarter"></div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	export default {
		props:['cake'],
		data() {
			return {
               
				echartsDatas:[],			
			}
		},
		methods: {
			// 登录次数引入echarts图表
			echartsInit() {
				const that = this // 将当前的this赋值给that，因为接下来this的指向不是当前的vue实例
				that.myChart = echarts.init(document.getElementById('quarter')) // 初始化echarts
				that.myChart.clear() // 多次绘制之前，先清空一下
				let option
				// 无数据时候显示
				// 转换为空字符串判断是否为空
				if (that.dataList === null) {
					option = {
						title: {
							text: '暂无数据',
							x: 'center',
							y: 'center',
							textStyle: {
								color: '#63ABDB',
								fontWeight: 'normal',
								fontSize: 16
							}
						}
					}
				} else {
					option = {
						series: [{
							name: '访问来源',
							type: 'pie',
							radius: ['40%', '70%'],
							startAngle:120, //起始角度
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '40',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: this.echartsDatas
						}]
					};
				}
				// 使用刚指定的配置项和数据显示图表。
				that.myChart.setOption(option)
				that.myChart.hideLoading() // 加载完隐藏动画
			},
			// 重置窗口大小，echarts自适应
			resize() {
				this.myChart.resize() // 窗口大小发生变化的时候重置
			},
		},
		destroyed() {
			// 移除监听，echarts自适应
			window.removeEventListener('resize', this.resize)
		},
		mounted() {
			// echarts图表自适应
			window.addEventListener('resize', this.resize) // 添加监听
			// dom渲染完毕后，加载显示
			this.echartsInit();
		},
		created() {
			//排列cake数据
			for(var i=0;i<this.cake.length;i++){
				if(i == 2){
					this.echartsDatas.push(this.cake[3]);
				}else if(i == 3){
					this.echartsDatas.push(this.cake[2]);
				}else{
					this.echartsDatas.push(this.cake[i]);
				}
			}
		}
	}
</script>

<style scoped="scoped">
	.seasons {
		width: 95%;
		height: 4.5rem;
		background-color: #FFFFFF;
		margin: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		padding: .2rem 0;
		position: relative;
		border-radius: 5px;
	}

	.seasons_box {
		width: 45%;
		height: 2.25rem;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.top {
		display: flex;
		align-items: center;
	}

	.one_seasons {
		display: block;
		width: .5rem;
		height: .25rem;
		background-color: #1CE4D4;
		margin-right: .2rem;
	}

	.one_seasons_text {
		display: block;
		font-size: .4rem;
		color: #9299A4;
	}

	.bottom {
		width: 2.1rem;
		height: .65rem;
		margin-left: .1rem;
		margin-top: .2rem;
		background-color: #E8F2FB;
		border-radius: 15px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: .35rem;
	}

	.seasons_box:nth-child(1),
	.seasons_box:nth-child(3) {
		border-right: 5px solid #F1F5F8;
	}

	.seasons_box:nth-child(1),
	.seasons_box:nth-child(2) {
		border-bottom: 5px solid #F1F5F8;
	}

	.seasons_box:nth-child(2),
	.seasons_box:nth-child(4) {
		display: flex;
		align-items: flex-end;
	}

	#quarter {
		width: 2.5rem;
		height: 2.5rem;
		background-color: #fff;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -1.25rem;
		margin-left: -1.25rem;
	}
</style>
